<template>
	<view class="content">
		<view class="header">
			<view :style="{height: systemBarHeight + 'px'}">
			</view>
			<view class="navbar">
				<image src="/static/xy/fh.png" mode="" @click="fh()"></image>
				<text>我的课时</text>
			</view>
		</view>

		<view class="search">
			<image src="/static/jl/search.png" mode=""></image>
			<view class="shu">

			</view>
			<input type="text" value="" placeholder="请输入学员名称" placeholder-class="ipt" />
		</view>

		<view class=" list">
			<view class="list_item">
				<u-checkbox-group v-model="checkboxValue1" placement="column" :border-bottom="true" @change="checkboxChange"
					iconPlacement="right">
					<u-checkbox  :customStyle="{marginBottom: '8px',borderBottom:'2rpx solid #E8E8E8', paddingTop:'15rpx',paddingBottom:'20rpx'}" active-color="#53DDA8"  v-for="(item, index) in checkboxList1" :key="index"
						:label="item.name" :name="item.name">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			
		</view>
		
		<view class="cifrom">
			<text>确 定</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemBarHeight: 0,

				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [{
						name: '小明 15012345678',
						disabled: false
					},
					{
						name: '111 15012345678',
						disabled: false
					},
					{
						name: '22 15012345678',
						disabled: false
					}
				],
			}
		},
		mounted() {
			/* 手机顶部高度 */
			this.getSysteminfo()
		},
		methods: {
			/* 手机顶部高度 */
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			fh() {
				uni.navigateBack({
					delta: 1
				})
			},
			checkboxChange(n) {
				console.log('change', n);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 750rpx;
		height: 1624rpx;
		background: #F5F5F5;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.header {
		background: #FFFFFF;
	}

	.navbar {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		>image {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			left: 32rpx;
		}

		>text {

			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 34rpx;
			color: #43484D;

		}
	}

	.search {
		width: 93%;
		height: 72rpx;
		background: #EFEFEF;
		border-radius: 82rpx 82rpx 82rpx 82rpx;
		border: 2rpx solid #E8E8E8;
		display: flex;
		align-items: center;
		margin: 24rpx auto 0;

		>image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 24rpx;
		}

		>input {}

		/deep/ .ipt {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #C6C6C6;
		}

		.shu {
			height: 28rpx;
			width: 0rpx;
			border: 2rpx solid #C3C3C3;
			margin-left: 16rpx;
			margin-right: 16rpx;
		}
	}
	.list{
			width: 93%;
			
			background: #FFFFFF;
			margin: auto;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: 32rpx;
			.list_item{
				width: 90%;
				margin: auto;
			}
	}
	.cifrom{
		width: 92%;
		height: 80rpx;
		margin: 200rpx auto 0;
		background: linear-gradient( 90deg, #14DFA6 0%, #00C18A 100%);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.15);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;align-items: center;justify-content: center;
	}
</style>